<!DOCTYPE html>

<head>
	<meta charset="UTF-8">
	<title>数据列表页面</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="favicon.ico">
	<link rel="stylesheet" href="../../assets/css/main.css">

</head>

<body>

<div class="x-body" id="app">
	<div class="layui-row">
		<form  class="layui-form layui-col-md12 x-so">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<select class="layui-input layui-input-sm" placeholder="请选择查询的条件" name="id" id="id">
						<option value=""></option>
						<option value="1">水果</option>
						<option value="2">蔬菜</option>
						<option value="3">手机</option>
						<option value="4">手机+地区</option>
					</select>
				</div>
				<button class="layui-btn layui-btn-sm submit"  type="button">搜索</button>
			</div>
		</form>
	</div>
	<div class="layui-form table-responsive">
		<table class="layui-table" id="demo">
		</table>
	</div>
	
	<div v-if="items.length==0" class="text-center layui-bg-gray no-records">对不起，暂无记录.</div>
	
	<!-- 分页组件 -->
	<div id="pagination" class="layui-box"></div>

</div>

<script type="text/javascript" src="../../js/libs/jquery.min.js "></script>
<script type="text/javascript" src="../../js/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../js/libs/vue/vue.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/utils.js"></script>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>
<script>
	//全局数据
	var G = {
		dataListUrl: "./json/user-list.json", // 获取数据接口
		delUrl: "./json/user-del.json", // 删除后端接口
		statusUrl: "./json/user-status.json",
		page: 1,
		pagesize: 12
	};

	// 初始化日历控件
	layui.use(['laydate','table'] , function () {
		var laydate = layui.laydate,
		 table = layui.table;

		//执行一个laydate实例
		laydate.render({
			elem: '#start' //指定元素
		});

		//执行一个laydate实例
		laydate.render({
			elem: '#end' //指定元素
		});
		
		 $(".submit").on("click",function(){
			var id = $("#id").val();
			var cols = [[]];
			var data = [];
			httpGet("./json/"+id+".json",function(data){
				console.log(data);
				APP.$data.items = data.data
				cols = data.cols;
				data = data.data;
				
				table.render({
					elem: '#demo'
					,height: 420
					,data: data //数据接口
					,title: '表'
					,page: true //开启分页
					,toolbar: true //开启头部工具栏，并为其绑定左侧模板
					,defaultToolbar: ['filter', 'print', 'exports', {
					    title: '提示' //标题
					    ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
					    ,icon: 'layui-icon-tips' //图标类名
					  }]
					,cols: cols
				})
			},function(data){
				
			})
		})
		
		
	});

	// 初始化 Vue 组件
	var APP = new Vue({
		el: '#app',
		// 数据
		data: {
			items: [],
			count: 500,
		},

		// 逻辑处理方法
		methods: {
			
		},

		mounted: function () {
			// 从后端获取数据
			this.$nextTick(function () {
				layui.use(['laypage','form'], function () {
					var laypage = layui.laypage;
					var form = layui.form;
					// 重新渲染 form 元素
					form.render("checkbox");
					form.on('switch(status)', function(data){
						messageLoading();
						var status = data.elem.checked ? 1 : 0;
						setTimeout(function () {
							httpGet(G.statusUrl, {
								status: status
							}, function (res) {
								messageOk("操作成功！");
							}, function (error) {
								data.elem.checked = !data.elem.checked;
								form.render();
								messageError(error);
							})
						}, 500);
					})
					
					//执行一个laypage实例
					laypage.render({
						elem: 'pagination', //分页container ID，不用加 # 号
						limit: G.pagesize, //页面显示记录条数
						count: APP.$data.count, //数据总数，从服务端得到
						groups: 5,
						layout: ['prev', 'page', 'next','limit','count'],
						prev: '<i class="layui-icon layui-icon-left"></i>',
						next: '<i class="layui-icon layui-icon-right"></i>',
						jump: function (obj, first) {
							//首次不执行
							if (first) {
								//do something
								return;
							}
							render(obj.curr, obj.limit);
						}

					});

				});
			})
		}
	}); //end Vue

	/**
	 * 渲染数据列表
	 * @param page
	 * @param pagesize
	 */
	function render(page, pagesize) {
		httpGet(G.dataListUrl, {
			page: page,
			pagesize: pagesize
		}, function (result) {
			// 更新模型
			APP.$data.items = result.data;
			APP.$data.count = result.count;
		});
	}

</script>

</body>

</html>